<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <!-- <h1 class="dashboard-title">安全数字化管理平台统计</h1> -->
      <div class="last-update">最后更新: {{ lastUpdate }}</div>
    </div>
      <div class="chart-card">
      <div class="chart-header">
        <h3>设备信息</h3>

      </div>
      <div class="chart-content">
        <el-descriptions>
          <el-descriptions-item label="产品序列号">{{welComeInfo?.DeviceInfo?.FQDN}}</el-descriptions-item>
          <el-descriptions-item label="主机名">{{welComeInfo?.DeviceInfo?.FQDN}}</el-descriptions-item>
          <el-descriptions-item label="iBMC固件版本">{{welComeInfo?.DeviceInfo?.BMCVersion}}</el-descriptions-item>
        
          <el-descriptions-item label="BIOS固件版本">
           
            {{welComeInfo?.DeviceInfo?.BIOSVersion}}
        
          </el-descriptions-item>
            <el-descriptions-item label="MAC地址">
           
            {{welComeInfo?.DeviceInfo?.MAC}}
        
          </el-descriptions-item>
          
             <el-descriptions-item label="全局唯一标识符">
           
            {{welComeInfo?.DeviceInfo?.GUID}}
        
          </el-descriptions-item>
             <el-descriptions-item label="磁盘占有率">
           
            {{welComeInfo?.Summary.Storage?.DiskUsagePercent?welComeInfo?.Summary.Storage?.DiskUsagePercent:0}}%
        
          </el-descriptions-item>
          
            <el-descriptions-item label="CPU占有率">
           
            {{welComeInfo?.Summary.Processor?.UseagePercent}}%
        
          </el-descriptions-item>
            <el-descriptions-item label="内存占有率">
           
            {{welComeInfo?.Summary.Memory?.UseagePercent}}%
        
          </el-descriptions-item>
        </el-descriptions>
        <!-- <canvas ref="requestChart"></canvas> -->
      </div>
    </div>

    <div class="stats-grid" style="margin-top: 20px;">
      <div class="stat-card" v-for="stat in stats" :key="stat.title">
        <div class="stat-icon" :style="{ background: stat.gradient }">
          <component :is="stat.icon" class="icon" />
        </div>
        <div class="stat-content">
          <div class="stat-label">{{ stat.title }}</div>
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-value" v-if="stat.value2">{{ stat.value2 }}</div>
          <div class="stat-value" v-if="stat.value3">{{ stat.value3 }}</div>
          <!-- <div class="stat-trend" :class="stat.trendClass">
            <span>{{ stat.trend }}</span>
            <span class="trend-text">{{ stat.trendText }}</span>
          </div> -->
        </div>
      </div>
    </div>

  

    <!-- <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-header">
          <h3>请求趋势</h3>
          <el-select v-model="requestPeriod" size="small" style="width: 100px">
            <el-option label="今日" value="today" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
          </el-select>
        </div>
        <div class="chart-content">
          <canvas ref="requestChart"></canvas>
        </div>
      </div>

      <div class="chart-card">
        <div class="chart-header">
          <h3>数据传输</h3>
          <el-select v-model="trafficPeriod" size="small" style="width: 100px">
            <el-option label="今日" value="today" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
          </el-select>
        </div>
        <div class="chart-content">
          <canvas ref="trafficChart"></canvas>
        </div>
      </div>
    </div> -->

    <!-- <div class="bottom-grid">
      <div class="server-card">
        <div class="card-header">
          <h3>服务器状态</h3>
          <el-tag type="success" size="small">{{ servers.length }} 台在线</el-tag>
        </div>
        <div class="server-list">
          <div class="server-item" v-for="server in servers" :key="server.name">
            <div class="server-info">
              <div class="server-name">{{ server.name }}</div>
              <div class="server-ip">{{ server.ip }}</div>
            </div>
            <div class="server-metrics">
              <div class="metric">
                <span class="metric-label">CPU</span>
                <el-progress :percentage="server.cpu" :color="getProgressColor(server.cpu)" :show-text="false"
                  style="width: 80px" />
                <span class="metric-value">{{ server.cpu }}%</span>
              </div>
              <div class="metric">
                <span class="metric-label">内存</span>
                <el-progress :percentage="server.memory" :color="getProgressColor(server.memory)" :show-text="false"
                  style="width: 80px" />
                <span class="metric-value">{{ server.memory }}%</span>
              </div>
            </div>
            <el-tag :type="server.status === 'healthy' ? 'success' : 'warning'" size="small">
              {{ server.status === 'healthy' ? '健康' : '警告' }}
            </el-tag>
          </div>
        </div>
      </div>

      <div class="alert-card">
        <div class="card-header">
          <h3>系统告警</h3>
          <el-badge :value="alerts.length" type="danger" />
        </div>
        <div class="alert-list">
          <div class="alert-item" v-for="alert in alerts" :key="alert.id">
            <div class="alert-icon" :class="`alert-${alert.level}`">
              <component :is="getAlertIcon(alert.level)" />
            </div>
            <div class="alert-content">
              <div class="alert-title">{{ alert.title }}</div>
              <div class="alert-time">{{ alert.time }}</div>
            </div>
            <el-tag :type="getAlertType(alert.level)" size="small">
              {{ alert.level }}
            </el-tag>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
import SystemUserController from '@/api/system/UserController';
import {
  Server,
  Cpu,
  HardDrive,
  Activity,
  FolderKanban,
  FileText,
  Receipt,
  ClipboardList,
  Package,
  Users,
  AlertCircle,
  AlertTriangle,
  Info
} from 'lucide-vue-next'
import Chart from 'chart.js/auto'

const lastUpdate = ref(new Date().toLocaleTimeString('zh-CN'))
const requestPeriod = ref('today')
const trafficPeriod = ref('today')
const requestChart = ref<HTMLCanvasElement | null>(null)
const trafficChart = ref<HTMLCanvasElement | null>(null)
const requestChartInstance = shallowRef<Chart | null>(null)
const trafficChartInstance = shallowRef<Chart | null>(null)

const stats = ref([
  {
    title: '处理器',
    value: '24',
    value2: '24',
    trend: '+2',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: Server,
    trendClass: 'trend-up'
  },
  {
    title: '网络适配器',
    value: '45%',
    value2: '24',
    trend: '-5%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: Cpu,
    trendClass: 'trend-down'
  },
  {
    title: '内存使用',
    value: '68%',
    value2: "",
    value3: "",
    trend: '+3%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    icon: HardDrive,
    trendClass: 'trend-up'
  },
  {
    title: '电源',
    value: '2.4TB',
    trend: '+12%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: Activity,
    trendClass: 'trend-up'
  },
  {
    title: '存储',
    value: '156',
    trend: '+8',
    trendText: '本月新增',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: FolderKanban,
    trendClass: 'trend-up'
  },
  {
    title: '风扇',
    value: '89',
    trend: '+5',
    trendText: '待审核',
    gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    icon: FileText,
    trendClass: 'trend-up'
  },
  // {
  //   title: '发票统计',
  //   value: '234',
  //   trend: '+15',
  //   trendText: '本月开具',
  //   gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
  //   icon: Receipt,
  //   trendClass: 'trend-up'
  // },
  // {
  //   title: '工单统计',
  //   value: '67',
  //   trend: '-12',
  //   trendText: '待处理',
  //   gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
  //   icon: ClipboardList,
  //   trendClass: 'trend-down'
  // },
  // {
  //   title: '资产统计',
  //   value: '1,245',
  //   trend: '+23',
  //   trendText: '本月新增',
  //   gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
  //   icon: Package,
  //   trendClass: 'trend-up'
  // },
  // {
  //   title: '用户统计',
  //   value: '3,456',
  //   trend: '+89',
  //   trendText: '活跃用户',
  //   gradient: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
  //   icon: Users,
  //   trendClass: 'trend-up'
  // }
])

const servers = ref([
  { name: 'Web-Server-01', ip: '192.168.1.10', cpu: 45, memory: 62, status: 'healthy' },
  { name: 'Web-Server-02', ip: '192.168.1.11', cpu: 38, memory: 55, status: 'healthy' },
  { name: 'DB-Server-01', ip: '192.168.1.20', cpu: 72, memory: 81, status: 'warning' },
  { name: 'Cache-Server-01', ip: '192.168.1.30', cpu: 28, memory: 45, status: 'healthy' },
  { name: 'API-Server-01', ip: '192.168.1.40', cpu: 56, memory: 68, status: 'healthy' }
])

const alerts = ref([
  { id: 1, level: 'critical', title: 'DB-Server-01 内��使用率超过80%', time: '5分钟前' },
  { id: 2, level: 'warning', title: 'Web-Server-03 响应时间过长', time: '15分钟前' },
  { id: 3, level: 'info', title: '系统备份已完成', time: '1小时前' },
  { id: 4, level: 'warning', title: '磁盘空间不足 (< 20%)', time: '2小时前' }
])

const getProgressColor = (value: number) => {
  if (value >= 80) return '#f56c6c'
  if (value >= 60) return '#e6a23c'
  return '#67c23a'
}

const getAlertIcon = (level: string) => {
  switch (level) {
    case 'critical':
      return AlertCircle
    case 'warning':
      return AlertTriangle
    default:
      return Info
  }
}

const getAlertType = (level: string) => {
  switch (level) {
    case 'critical':
      return 'danger'
    case 'warning':
      return 'warning'
    default:
      return 'info'
  }
}

const initRequestChart = () => {
  if (!requestChart.value) return

  const ctx = requestChart.value.getContext('2d')
  if (!ctx) return

  requestChartInstance.value = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      datasets: [
        {
          label: '2XX',
          data: [1200, 1900, 3000, 5000, 4200, 3800, 2800],
          borderColor: '#67c23a',
          backgroundColor: 'rgba(103, 194, 58, 0.1)',
          tension: 0.4,
          fill: true
        },
        {
          label: '4XX',
          data: [200, 300, 450, 600, 520, 480, 380],
          borderColor: '#e6a23c',
          backgroundColor: 'rgba(230, 162, 60, 0.1)',
          tension: 0.4,
          fill: true
        },
        {
          label: '5XX',
          data: [50, 80, 120, 150, 130, 110, 90],
          borderColor: '#f56c6c',
          backgroundColor: 'rgba(245, 108, 108, 0.1)',
          tension: 0.4,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            color: '#606266',
            usePointStyle: true,
            padding: 15
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        },
        x: {
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        }
      }
    }
  })
}

const initTrafficChart = () => {
  if (!trafficChart.value) return

  const ctx = trafficChart.value.getContext('2d')
  if (!ctx) return

  trafficChartInstance.value = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      datasets: [
        {
          label: '入站流量 (GB)',
          data: [120, 190, 300, 500, 420, 380, 280],
          backgroundColor: 'rgba(64, 158, 255, 0.8)',
          borderRadius: 6
        },
        {
          label: '出站流量 (GB)',
          data: [80, 150, 250, 420, 350, 320, 240],
          backgroundColor: 'rgba(103, 194, 58, 0.8)',
          borderRadius: 6
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            color: '#606266',
            usePointStyle: true,
            padding: 15
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        },
        x: {
          grid: {
            display: false
          },
          ticks: {
            color: '#909399'
          }
        }
      }
    }
  })
}

const updateData = () => {
  servers.value = servers.value.map(server => ({
    ...server,
    cpu: Math.max(20, Math.min(90, server.cpu + Math.random() * 10 - 5)),
    memory: Math.max(30, Math.min(95, server.memory + Math.random() * 8 - 4))
  }))

  lastUpdate.value = new Date().toLocaleTimeString('zh-CN')
}

let updateInterval: number
const welComeInfo = ref() as any
function initData() {
  let params = {

  }
  SystemUserController.Overview(params).then(res => {
    welComeInfo.value = JSON.parse(res.data)
    console.log( welComeInfo.value)
    stats.value[0].value = "总数：" + welComeInfo.value.Summary.Processor.MaxNum
    stats.value[0].value2 = "在位：" + welComeInfo.value.Summary.Processor.CurrentNum

    stats.value[1].value = "总数：" + welComeInfo.value.Summary.Netadapter.MaxNum
    stats.value[1].value2 = "在位：" + welComeInfo.value.Summary.Netadapter.CurrentNum
    stats.value[2].value = "总数：" + welComeInfo.value.Summary.Memory.MaxNum
    stats.value[2].value2 = "在位：" + welComeInfo.value.Summary.Memory.CurrentNum
    stats.value[2].value3 = "容量：" + welComeInfo.value.Summary.Memory.CapacityGiB + "GiB"


    stats.value[3].value = "总数：" + welComeInfo.value.Summary.Power.MaxNum
    stats.value[3].value2 = "在位：" + welComeInfo.value.Summary.Power.CurrentNum

    stats.value[4].value = "RAID卡：" + welComeInfo.value.Summary.Storage.RaidControllerNum
    stats.value[4].value2 = "逻辑盘：" + welComeInfo.value.Summary.Storage.LogicalDriveNum

    stats.value[4].value3 = "物理盘:" + welComeInfo.value.Summary.Storage.PhysicalDriveNum

    stats.value[5].value = "总数：" + welComeInfo.value.Summary.Fan.MaxNum
    stats.value[5].value2 = "在位：" + welComeInfo.value.Summary.Fan.CurrentNum

  })
}
onMounted(() => {
  initData()
  // initRequestChart()
  // initTrafficChart()
  updateInterval = window.setInterval(updateData, 3000)
})

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
  if (requestChartInstance.value) {
    requestChartInstance.value.destroy()
  }
  if (trafficChartInstance.value) {
    trafficChartInstance.value.destroy()
  }
})
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.last-update {
  color: #909399;
  font-size: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 15px;
}

.stat-icon .icon {
  width: 28px;
  height: 28px;
  color: white;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.stat-trend {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-text {
  color: #909399;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}
.chart-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.chart-content {
  /* height: 280px; */
}

.bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.server-card,
.alert-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.server-list,
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.server-item:hover {
  background: #f5f7fa;
}

.server-info {
  flex-shrink: 0;
  width: 140px;
}

.server-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  margin-bottom: 4px;
}

.server-ip {
  font-size: 12px;
  color: #909399;
}

.server-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-label {
  font-size: 12px;
  color: #606266;
  width: 40px;
}

.metric-value {
  font-size: 12px;
  color: #606266;
  width: 40px;
  text-align: right;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.alert-item:hover {
  background: #f5f7fa;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-critical {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.alert-warning {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.alert-info {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.alert-time {
  font-size: 12px;
  color: #909399;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .charts-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>